<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义media movie</title>
    <style>
        body {
            padding: 20px;
        }

        #processPane {
            position: relative;
            margin-top: 10px;
        }

        #processBar {
            width: 500px;
            height: 0px;
            border: 1px solid #000;
            margin: 10px 0;
        }

        #processDot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #666;
            background-color: rgba(16, 255, 0, 0.7);
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(-50%, -50%);
            cursor:pointer;
        }
        #myVideo video{
            max-width:500px;
        }
        #volume{
            width:100px;
            height:20px;
            box-sizing:border-box;
            background-color:aquamarine;
            background-clip: content-box;
            padding-right:0px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div id="myVideo">

        <video id="myMedia" src="https://apd-42b12089b4acdd906c398a64f0997627.v.smtcdns.com/vhot2.qqvideo.tc.qq.com/AjLwjQWw4rjg6HW7o8O2Y7KLSpY-e_ZJGPVHw5m7V3N8/h1704l4vigq.mp4?vkey=BBBC997C2E792DAD11930DFF4C282ADB532BAF037D8D26BEFEF9D0DCD14EDD380CA81BC2D169B21BE595195151C5E7317EF7A9B2B94CE26AE22B09BDDDDCC07BC1D88CAF24F3C31594E1B1D7177592A9A124D44EA84524F9&sdtfrom=v1095&guid=c93cfb9721743e0948579e09abb9cd10"></video>
        <div id="processPane">            
            <!-- 进度条 -->
            <div id="processBar"></div>
            <!-- 滑块 -->
            <span id="processDot"></span>
            <!-- 读秒 -->
            <span id="processTime">0/0</span>
            <!-- 播放与暂停 -->
            <input type="button" id="play" value="播放">
            <input type="button" id="pause" value="暂停">
            <div id="volume"></div>
        </div>
    </div>
    <script>
        var myMedia = document.getElementById("myMedia");
        var processTime = document.getElementById("processTime");
        var processDot = document.getElementById("processDot");
        var processBar = document.getElementById("processBar");
        var play = document.getElementById("play");
        var pause = document.getElementById("pause");
        var volume = document.getElementById("volume");
        volume.num=100;
        var processWidth = processBar.offsetWidth;
        var processLeft = processBar.getBoundingClientRect().left;
        
        myMedia.onloadedmetadata=function(){
            console.log("onloadedmetadata");
            myMedia.play();
            var totalTime = myMedia.duration;
            //点击进度条
            processBar.onmousedown=function(){
                return false;
            }
            //播放与暂停
            play.onclick=function(){
                myMedia.play();
            }
            pause.onclick=function(){
                myMedia.pause();
            }
            //播放时间变化监听
            myMedia.ontimeupdate=function(){
                // 读秒
                processTime.innerHTML=parseInt(myMedia.currentTime)+"/"+parseInt(totalTime);
                // 滑块滑动
                if(!processDot.whenclick){
                    processDot.style.left=(myMedia.currentTime/totalTime)*processWidth+"px";
                }                
            }
            //拖拽滑块
            processDot.onmousedown=function(){
                processDot.whenclick=true;

                document.onmousemove=function(){
                    //边界
                    var nowLeft = event.clientX-processLeft;
                    nowLeft = Math.max(0,nowLeft);
                    nowLeft = Math.min(processWidth,nowLeft);
                    processDot.style.left=nowLeft+"px";
                }

                document.onmouseup=function(){
                    var nowLeft = event.clientX-processLeft;
                    myMedia.currentTime = (nowLeft/processWidth)*totalTime;
                    document.onmousemove=document.onmouseup=null;
                    processDot.whenclick=false;
                }
                return false;
            }
            //音量控制
            volume.onmousewheel=function(){
                event.wheelDelta>0?volume.num+=5:volume.num-=5;
                // 边界
                volume.num = Math.max(0,volume.num);
                volume.num = Math.min(100,volume.num);
                
                myMedia.volume=volume.num/100;
                volume.style.paddingRight=100-volume.num+"px";
            }
        }
       
    </script>
</body>
</html>